<template>
  <div>
    <div class="top-list">
      <div class="top-nav">
        <i class="el-icon-arrow-left"  @click="$router.go(-1)"></i>
        <div class="title">{{name}}</div>
      </div>
      <div class="list">
        <div class="wrapper"
        v-for="(item,index) in tracks"
        :key='item.id'
        @click="play(trackIds[index])"
        >
          <div class="index">{{index+1}}</div>
          <div class="name">{{item.name}}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tracks:null,
      name:"",
      trackIds:null
    }
  },
  methods:{
    encode(url) {
        if(url) return encodeURIComponent(url);
    },
    play(item) {
      console.log(item)
      this.$store.dispatch("getSong",item.id);
      this.$store.state.songCover = item.picUrl;
      this.$store.state.songName = item.name;
      this.$api.getSongs
      this.$api.getLyric({
          id:item.id
      }).then(res => {
          this.$store.state.songLriycs = res.lrc.lyric;
      });
    }
  },
  mounted() {
    this.$api._getTopList({
      id:this.$route.params.id
    }).then( res => {
      console.log(res)
      this.tracks = res.playlist.tracks;
      this.trackIds = res.playlist.trackIds;
      this.name = res.playlist.name;
    });
  },
}
</script>

<style lang="less" scoped>
.top-nav {
  border-bottom: 1.5px solid rgb(157, 97, 212);
  display: grid;
  // width: 100vw;
  grid: 1fr / 4em 1fr 4em;
  i {
    font-size: 2em;
    align-self: center;
    justify-self: center;
  }
  .title {
    // 开启之后溢出的文字不会省略
    // margin: 0 auto;
    height: 50px;
    font-size: 1.4em;
    text-align: center;
    line-height: 50px;
    // background-color: #f1f1f1;
    white-space: nowrap;
    overflow-x: hidden;
    text-overflow: ellipsis;
  }
}
.wrapper {
    background-color: rgb(236, 236, 236);
    height: 3em;
    align-items: center;
    display: grid;
    grid: 1fr / 64px 1fr;
    .index {
      width: 4em;
      text-align: center;
      color: rgb(85, 85, 85);
    }
    .name {
      font-size: 1.2em;
      white-space: nowrap;
      overflow-x: hidden;
      text-overflow: ellipsis;
    }
}
.list > .wrapper:nth-child(odd) {
  background-color: rgb(217, 217, 217);
}
</style>